<template class='global-container'>
  <img src="./assets/logo.png">
  <div>
  </div>
  <HelloWorld msg="Welcome to Fisco App"/>
  <el-select  clearable v-model="address" @change="queryAccount(address)" style="width: 50%;margin-bottom: 1%;" placeholder="请选择">
    <el-option v-for="item in options" :label=item.label :value="item.value"></el-option>
  </el-select>
  <el-tabs v-loading="loading" class="tabs" v-model="activeName" type="card" @tab-click="handleClick">
  	<el-tab-pane label="Account">
		<div class="info-container">
			<div>
				<el-card class="box-card">
					<div style="text-align: left;" class="avatar">
						<el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
					</div>
					
							  <div class="card-header">
								<span>{{express.name}}</span>
							  </div>
							<div  class="text item">余额 : {{express.balance}} 万元</div>
							<div  class="text item">公司账户</div>
				</el-card>
			</div>
		</div>
	</el-tab-pane>
  	<el-tab-pane label="Send">
		<div class="info-container">
			<div>
				<el-card class="box-card">
					  <div  class="card-header">
						<span>转账地址</span>
					  </div>
					<el-input v-model="toAddress" class="item">0x0</el-input>
					<div class="card-header">
						<span>转账金额</span>
					</div>
					<el-input v-model="transferValue" class="item">100</el-input>
					<el-button type="primary" v-on:click="transferTo()">转账</el-button>
				</el-card>
			</div>
		</div>
	</el-tab-pane>
   </el-tabs>
  
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
import { ref } from 'vue'
import { ElNotification } from 'element-plus'


const value = ref('')

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  
  data(){
	return{
	//初始化
		express:{
			name:'',
			balance:0,
		},
		
		address:'',
		
		toAddress:'',
		
		transferValue:'',
		
		local:{},
		
		loading:false,
		
		case_info_loading:false,
		
		case_data:null,
		
		options : [
		  {
		    value: '0x7b4426215c0d9bfac55f5c46648a16a7ce38ab71',
		    label: '0x7b4426215c0d9bfac55f5c46648a16a7ce38ab71',
		  },
		  {
		    value: '0x64e8110e0582a0018985a812afcfb1223d8cd05d',
		    label: '0x64e8110e0582a0018985a812afcfb1223d8cd05d',
		  },
		  {
		    value: '0x77610c6fa001bb97bf71ad335698b36545bc8caf',
		    label: '0x77610c6fa001bb97bf71ad335698b36545bc8caf',
		  },
		  {
		    value: '0xa8551f837dfc8feb31d145c89087c72b5768564e',
		    label: '0xa8551f837dfc8feb31d145c89087c72b5768564e',
		  },
		]
	}
  },
  
  created(){

  },
  	
   methods:{
  		/*
  		* 向后端发送AJAX请求返回数据
  		*/
  		queryAccount(data){
  			axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'; // 配置请求头
  			console.log('/api?'+'address=' + this.address);
  			var that = this;
  			
  			//替换特殊字符.
  			var data_str = JSON.stringify(data);
  			data_str =  data_str.replace(/%/g,"%25");
  			// var test = "%";
  			// test  = test.replace(/%/,"%25");
  			// console.log(test);
  			this.loading = true;
  			axios.get('/api?'+'address=' + this.address)
  			.then(response =>{
  				setTimeout(function(){
  					console.log('后端数据:')
  					console.log(response.data)
  					if(response.data.errno == 0){
  						that.express = response.data.data
  						that.loading=false;
  					}else{
						that.loading = false;
						that.ErrorAccount();
					}
  				},0)
  			})
  		},//end submitToServer
		
		transferTo(){
			axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'; // 配置请求头
			var that = this;
			
			// var test = "%";
			// test  = test.replace(/%/,"%25");
			// console.log(test);
			this.loading = true;
			axios.get('/api/transfer?'+'fromAddress=' + this.address + '&&' 
			+'toAddress=' + this.toAddress +'&&' 
			+'value='     + this.transferValue )
			.then(response =>{
				setTimeout(function(){
					console.log('后端数据:')
					console.log(response.data)
					if(response.data.errno == 0){
						that.express.balance -= that.transferValue;
						that.loading=false;
						that.SuccessTransfer()
					}else{
						that.loading = false;
						that.ErrorTransfer()
					}
				},0)
			})
		},
		
		SuccessTransfer(){
		  ElNotification({
			title: 'Success',
			message: '转账成功',
			type: 'success'
		  })
		},
		
		ErrorAccount(){
			ElNotification({
			    title: 'Error',
			    message: '账户不存在或者权限不足',
			    type: 'error',
			  })
		},		
		
		ErrorTransfer(){
			ElNotification({
			    title: 'Error',
			    message: '转账失败',
			    type: 'error',
			  })
		}
  		
      },//end methods
	  

	  
  	/*
  		监听变量
  	*/
  	watch:{
  
  	}
}
</script>

<style>
#app {
	
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 20%;
	width: 60%;
}

.info-container{
	text-align: center;
}

.tabs{
	height: 375px;
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	display: inline-block;
	background-color: #f9f9f9;
}
</style>
